<template>
    <app-frame :pad="pad" :menus="menus" :title="title" :mainTitle="mainTitle">
        <template #logo>
            <img :src="logo" v-if="logo" class="logo" />
            <i v-else class="iconfont icon-liushuixian-liushuixianx" />
        </template>
    </app-frame>
</template>

<script setup>
import appFrame from "@/components/frame/app-frame.vue";
import { useRouter } from "vue-router";
import { useSysStore } from "@/store";

const router = useRouter();
const sysStore = useSysStore();
const menus = computed(sysStore.getMenuTree);
const title = computed(() => {
    let meta = router.currentRoute.value.meta;
    return meta?.title || document.title;
});
const pad = computed(() => {
    return router.currentRoute.value.meta.pad != false;
});
const logo = computed(() => {
    return sysStore.getUserConfig().logo;
});
const mainTitle = computed(() => {
    let title = sysStore.getUserConfig().title;
    if (title) {
        document.title = title;
    }

    return document.title;
});

watch(logo, () => {
    if (logo.value) {
        document.head.querySelectorAll("link").forEach((link) => {
            if (link.rel === "icon") {
                link.parentNode?.removeChild(link);
            }
        });
        const link = document.createElement("link");
        link.rel = "icon";
        link.href = logo.value;
        document.head.append(link);
    }
});
</script>

<style lang="scss" scoped>
.logo {
    height: 20px;
    max-width: 100%;
}
</style>
